<template>
  <div class="chou">
      <div class="top">
          <img src="qita/1.png" alt="" @click="fun()">
          <span>个护快消众爆款</span>
          <img src="qita/15.png" alt="">
      </div>
      <div class="bottom">
          <ul>
              <li v-for="(v,i) in this.$store.state.qita.obj" :key="i"><img :src="v.img"></li>
          </ul>
          
          <div class="anmo">
              <div class="left" >
                  <img src="qita/12.png" alt="">
              </div>
              <div class="right">
                <h3>摩摩哒摩力海豚4D按摩椅</h3>
                <p>4D机芯 | 平板触控</p>
                <div class="fu">
                    <span>03.22 10：00<br>正式开抢</span>
                    <span>13269<br>人已预约</span>
                </div>
                <a href="#">￥3999 点击预约</a>
              </div>
          </div>
          <img src="qita/13.png" alt="">
        <div class="anmo">
              <div class="left" >
                  <img src="qita/14.png" alt="">
              </div>
              <div class="right">
                <h3>KOKONI 魔芯3D打印机</h3>
                <p>拍照建模 | 丰富免费模型库</p>
                <div class="fu">
                    <span>预约已结束<br>剩余开抢</span>
                    <span>16165<br>人已预约</span>
                </div>
                <a href="#">￥999 众筹首发</a>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    created(){
        this.$store.dispatch("qita")
    },
    methods:{
        fun(){
            this.$router.push("/home");
        }
    }
}
</script>
<style scoped>
    .chou{
        width: 100%;
        height: 0.5rem;
        margin-top: 0.5rem;
    }
    .chou .top{
        width: 100%;
        height: 0.5rem;
        padding: 0.1rem;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
    }
    .chou .top img{
        width: 0.33rem;
        height: 0.33rem;
        display:inline-block;
    }
    .chou .top span{
        font-size: 0.16rem;
        display: inline-block;
    }
    .chou .top i{
        display: inline-block;
        width: 0.24rem;
        height: 0.24rem;
    }
    .chou .bottom{
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
    }
    .chou .bottom ul li img{
        width: 100%;
        display: block;
    }
    .chou .bottom .anmo{
        background:#eee;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .chou .bottom .anmo .left{
        display: flex;
        padding: 0.1rem;
    }
    .chou .bottom .anmo .left img{
        width: 1.4rem;
        height: 1.4rem;
    }
    .chou .bottom .anmo .right  {
        display: flex;
        flex-direction: column;
        padding: 0.1rem;
        box-sizing: border-box;
    }
    .chou .bottom .anmo .right h3{
        font-size: 0.16rem;
        line-height: 0.16rem;
    }
    .chou .bottom .anmo .right p{
        display: flex;
        align-items: center;
        font-size: 0.14rem;
        margin-top: -0.05rem;
    }
    .chou .bottom .anmo .right .fu{
        display: flex;
        justify-content: space-between;
        margin-top: -0.1rem;
    }
    .chou .bottom .anmo .right span{
        display: inline-block;
        font-size: 0.14rem;
         line-height: 0.16rem;
         padding-top: -0.1rem;
         margin-top: 0.1rem;

    }
    .chou .bottom .anmo .right a{
        display: inline-block;
        width:1.1rem ;
        height: 0.25rem;
        background-color: red;
        color: #fff;
        border-radius: 0.5rem;
        font-size: 0.12rem;
         text-align: center;
         line-height: 0.25rem;
    margin-top: 0.1rem;
    }
    .chou .bottom img{
        display: block;
    }
</style>